<template>
    <div>
        <h1>为 <span style="color:#409EFF;">{{ text1 }}</span> 的 <span style="color:#409EFF;">{{ text2 }}
            </span> 添加排片计划</h1>
        <el-divider></el-divider>

        <el-form style="width: 560px" :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="选择电影" prop="movie_id">
                <template>
                    <el-select style="width:100%;" v-model="form.movie_id" filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="queryMovies" :loading="loading">
                        <el-option v-for="item in movies" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="放映日期" required>
                <el-date-picker type="date" placeholder="选择日期" v-model="form.showingon_date" value-format="yyyy-MM-dd"
                    format="yyyy 年 MM 月 dd 日">
                </el-date-picker>&nbsp;&nbsp;&nbsp;
                <el-time-picker v-model="form.showingon_time" placeholder="选择时间" value-format="HH:mm">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="票价" prop="price">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="立即发布" prop="status">
                <el-switch v-model="form.status" active-color="#13ce66">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">立即新增该计划</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text1: '',
            text2: '',
            movies: [],
            loading: false,
            form: {
                cinema_id: '',
                cinema_room_id: '',
                movie_id: '',
                showingon_date: '',
                showingon_time: '',
                status: 0,
                price: '',
            },
            rules: {
                movie_id: [{ required: true, message: '必填', trigger: 'blur' }],
                price: [{ required: true, message: '必填', trigger: 'blur' }],
                status: [{ required: true, message: '必填', trigger: 'blur' }],
            },
        }
    },
    methods: {
        queryMovies(query) {
            if (query !== '') {
                this.loading = true;
                this.$http.movieApi.queryByNameLike({ name: query, page: 1, pagesize: 100 }).then(res => {
                    this.loading = false;
                    this.movies = res.data.data.result;
                })
            } else {
                this.options = [];
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.status = this.form.status * 1;
                    this.$http.showingonPlanApi.add(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.resetForm('form')
                            this.$message({
                                message: '新增排片计划成功',
                                type: 'success'
                            })
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },


    },
    mounted() {
        this.form.cinema_id = this.$route.params.id;
        this.form.cinema_room_id = this.$route.params.roomID;
        this.$http.cinemaApi.queryById({ id: this.form.cinema_id }).then(res => {
            this.text1 = res.data.data.cinema_name;
        })
        this.$http.cinemaRoomApi.queryById({ id: this.form.cinema_room_id }).then(res => {
            this.text2 = res.data.data.cinema_room_name
        })
    },
}
</script>

<style lang="scss" scoped>

</style>